<template>
    <div class="ab">
        <div class="abAvatar">
            <img :src="userInfo.avatar" alt="" class="abAvatarImg">
        </div>
        <div class="gap"></div>
        <div class="abAccount">
            <div class="abAccountLabel" v-if="userInfo.account">
                <div class="abAccountLabelItem">账号</div>
                <div>{{ userInfo.account }}</div>
            </div>
            <div class="abAccountLabel">
                <div class="abAccountLabelItem">昵称</div>
                <div>{{ userInfo.nickname }}</div>
            </div>
            <div class="abAccountLabel">
                <div class="abAccountLabelItem">唯一标识</div>
                <div>{{ userInfo.uniqueId }}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'AccountView',
    props: {
        userInfo: {
            type: Object,
            default: () => ({
                avatar: '',
                account: '',
                nickname: '',
                uniqueId: '',
            })
        },
    },
}
</script>
<style scoped>
.ab{
    display: flex;
    box-sizing: border-box;
    margin-top: 100px;
    justify-content: flex-start;
    width: 400px;
    margin: 100px auto 0;
}
.abAccount{
    height: fit-content;
    width: 100%;
}
.abAccountLabel{
    display: flex;
}
.gap{
    width: 20px;
    height: 1px;
}
.abAccountLabelItem{
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}
.abAvatar{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    overflow: hidden;
    min-width: 100px;
    max-width: 100px;
}
.abAvatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.unloginBtn {
    text-align: center;
    border-radius: 5px;
    background: var(--unloginBtnBackground);
    color: var(--unloginBtnColor);
    padding: 10px;
    margin-top: 5px;
}
</style>